<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter();
const props = defineProps({
    info:{
        type:Object
    }
})
// console.log(props.info);
let loading = ref(true)
if(props.info){
    // console.log(111);
    loading = false
}

const goMovieDetail = (mid) => {
    router.push({
        name:'movieDetail',
        params: {
            id: mid, 
        }
    })
}
</script>

<template>
    <div class="movie">
        <van-skeleton :loading="loading">
            <template #template>
                <div :style="{ display: 'flex', width: '100%' }">
                    <van-skeleton-image />
                    <div :style="{ flex: 1, marginLeft: '16px' }">
                        <van-skeleton-paragraph row-width="60%" />
                        <van-skeleton-paragraph />
                        <van-skeleton-paragraph />
                        <van-skeleton-paragraph />
                    </div>
                </div>
            </template>
            <img :src="props.info.img" alt="" @click="goMovieDetail(props.info.id)">
            <div class="text">
                <p class="title">
                    <h3 class="title">{{ props.info.nm }}</h3>
                    <div class="version" v-if="props.info.version==='v2d imax'">
                        <img src="../assets/imgs/v2dimax.png" alt="">
                    </div>
                    <div class="version" v-else-if="props.info.version==='v3d imax'">
                        <img src="../assets/imgs/v3dimax.png" alt="">
                    </div>
                </p>
                <p class="score" v-if="props.info.showStateButton.content=='预售'">
                     <span class="color">{{ props.info.wish }}</span>人想看
                </p>
                <p class="score" v-else>观众评 <span class="color">{{ props.info.sc }}</span></p>
                <p class="star"><van-text-ellipsis :content="'主演：'+(props.info.star?props.info.star:'未知')" />
                 </p>
                <p class="show-info">{{ props.info.showInfo }}</p>
            </div>
            <button :style="{
                'backgroundColor':props.info.showStateButton.color,
                'boxShadow':props.info.showStateButton.shadowColor  }">
                {{ props.info.showStateButton.content }}
            </button>
        </van-skeleton>
        
    </div>
</template>

<style lang="scss" scoped>
.movie{
    display: flex;
    padding: 10px;
    img{
        width: 64px;
        height: 90px;
    }
    .text{
        margin-left: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        
        p{
            font-size: 13px;
            color: #666;
            .color{
                font-size: 16px;
                color: #faaf00;
                font-weight: 700;
            }
            &.star{
                width: 90%;
            }
            &.title{
                display: flex;
                h3{
                    font-size: 16px;
                    font-weight: 700;
                    color: #333;
                    flex-shrink: 1;
                    padding-right: 10px;
                }
                .version{
                    img{
                        height: 14px;
                        width: 43px;
                    }
                }
            }
        }
        
    }
    button{
        width: 54px;
        height: 28px;
        color: #fff;
        border-radius: 999px;
        font-size: 14px;
        outline: none;
        border: none;
        align-self: center;
    }
}
</style>